<template>
  <div>
    <el-form ref="appointmentApprovalRef" :inline="true" :model="appointmentApproval" class="demo-form-inline"
      label-position="right" label-width="80px" size="medium">
      <el-row>
        <el-col :span="8">
          <el-form-item label="状态">
            <el-select v-model="appointmentApproval.approvalStatus" placeholder="请选择状态">
              <el-option v-for="item in approvalStatusList" :key="item.value" :label="item.approvalStatus"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="空间分类">
            <el-select v-model="appointmentApproval.spatialClassification" placeholder="请选择状态">
              <el-option v-for="item in spatialClassificationList" :key="item.value"
                :label="item.spatialClassificationName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="空间名称">
            <el-input v-model="appointmentApproval.spaceName" placeholder="请输入空间名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="预约时间">
            <el-date-picker v-model="appointmentApproval.appointmentTime" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="预约人">
            <el-input v-model="appointmentApproval.MakeAppointment" placeholder="请输入预约人姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="info" @click="onSubmit">查 询</el-button>
            <el-button type="info" @reset="spaceDataResetForm">重 置</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="2"></el-col>
      </el-row>
    </el-form>
    <el-button type="info" @click="addexamineApprove" size="medium">新 建</el-button>
    <el-button type="info" @click="addexamineApprove" size="medium">批量审批</el-button>
    <el-table :data="examineApproveData">
      <el-table-column type="selection"> </el-table-column>
      <el-table-column type="index" :index="indexMethod" label="序号"> </el-table-column>
      <el-table-column prop="approvalStatus" label="状态">
        <template slot-scope="scope">
          <div v-if="scope.row.approvalStatus == 1">待审批</div>
          <div v-if="scope.row.approvalStatus == 2">已审批</div>
          <div v-if="scope.row.approvalStatus == 3">已驳回</div>
        </template>
      </el-table-column>
      <el-table-column prop="classification" label="所属分类" width="180">
      </el-table-column>
      <el-table-column prop="spaceName" label="空间名称"> </el-table-column>
      <el-table-column prop="appointmentDate" label="预约日期">
      </el-table-column>
      <el-table-column prop="appointmentTime" label="预约时间">
      </el-table-column>
      <el-table-column prop="appointmentNumber" label="预约人数">
      </el-table-column>
      <el-table-column prop="appointmentPerson" label="预约人">
      </el-table-column>
      <el-table-column prop="applicationTime" label="申请时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.approvalStatus == 1" @click="handleClick(scope.row)" type="text"
            size="small">审批</el-button>
          <el-button type="text" size="small">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
    </el-pagination>

    <!-- 弹框 -->
    <add-form ref="addForm" @submit="handleSubmit"></add-form>
    <add-Approve ref="addApprove" @submit="addApproves"></add-Approve>

  </div>
</template>

<script>
import AddForm from '@/views/appointmentManagement/examineApprove'
import AddApprove from '@/views/appointmentManagement/examineApprovedialog'
export default {
  components: {
    AddForm,
    AddApprove
  },
  data() {
    return {
      // 查询参数
      appointmentApproval: {
        // 审批状态
        approvalStatus: '',
        // 空间分类
        spatialClassification: '',
        // 空间分类
        spaceName: '',
        // 预约时间
        appointmentTime: '',
        // 预约人
        MakeAppointment: '',
      },
      // 审批状态
      approvalStatusList: [
        { approvalStatus: '待审批', id: 1 },
        { approvalStatus: '已审批', id: 2 },
        { approvalStatus: '已驳回', id: 3 },
      ],
      // 空间分类列表
      spatialClassificationList: [
        { spatialClassificationName: '实验室', id: 1 },
        { spatialClassificationName: '图书馆', id: 2 },
      ],
      examineApproveData: [
        {
          // 审批状态
          approvalStatus: 1,
          // 所属分类
          classification: '图书馆',
          // 空间名称
          spaceName: '阅览室1',
          // 预约日期
          appointmentDate: '2023-04-21',
          // 预约时间
          appointmentTime: '08:00-10:00',
          // 预约人数
          appointmentNumber: '5人',
          // 预约人
          appointmentPerson: '王强',
          // 申请时间
          applicationTime: '2024-04-15 15:28:15',
        },
        {
          approvalStatus: 1,
          classification: '图书馆',
          spaceName: '阅览室1',
          appointmentDate: '2023-04-21',
          appointmentTime: '08:00-10:00',
          appointmentNumber: '5人',
          appointmentPerson: '王强',
          applicationTime: '2024-04-15 15:28:15',
        },
        {
          approvalStatus: 3,
          classification: '图书馆',
          spaceName: '阅览室1',
          appointmentDate: '2023-04-21',
          appointmentTime: '08:00-10:00',
          appointmentNumber: '5人',
          appointmentPerson: '王强',
          applicationTime: '2024-04-15 15:28:15',
        },
        {
          approvalStatus: 2,
          classification: '图书馆',
          spaceName: '阅览室1',
          appointmentDate: '2023-04-21',
          appointmentTime: '08:00-10:00',
          appointmentNumber: '5人',
          appointmentPerson: '王强',
          applicationTime: '2024-04-15 15:28:15',
        },
      ],
      // 分页
      currentPage: 4,
    }
  },
  methods: {
    // 不足两位数 补0操作
    indexMethod(index) {
      return (index + 1).toString().padStart(2, '0');
    },
    handleClick(e) {
      console.log('111');
      this.$refs.addApprove.openDialog()
    },
    // 查询
    onSubmit() {
      console.log(this.appointmentApproval)
    },
    // 重置表单
    spaceDataResetForm() {
      // this.$refs.appointmentApprovalRef.resetFields();

      this.$refs.appointmentApprovalRef.resetFields()
      this.$refs.appointmentApprovalRef.clearValidate()
    },
    // 新建预约审批
    addexamineApprove() {
      this.$refs.addForm.openDialog()
    },


    // 提交预约审批
    handleSubmit() { },
    // 分页
    handleSizeChange() { },
    // 分页
    handleCurrentChange() { },
    // 点击审批弹出框
    addApproves() {
      console.log('4');
      this.$refs.addApprove.openDialog()
    }
  },
}
</script>

<style lang="less" scoped>
/deep/.el-date-editor--daterange.el-input__inner {
  width: 240px;
}

/deep/.el-input--suffix .el-input__inner {
  padding-right: 50px;
}

/deep/.el-form-item__content {
  width: 243px;
}
</style>